<template>
    <div class="content">
        <div class="title-lr">
           <slot name="title-left"></slot>
            <slot name="title-left2"></slot>
        <div class="button">
            <img src="../assets/1.png" alt="" style="width:25px;height:25px">
            <img src="../assets/2.png" alt="" style="width:25px;height:25px">
        </div> 
        </div>
        
        <div class="img">
            <slot name="message"></slot>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Anime',

    data() {
        return {
           
        };
    },

    mounted() {
        
    },

    methods: {
        
    },
};
</script>

<style>
a{
    text-decoration: none;
    color: #ffffff;
    
}
.content{
    width: 80%;
    height: 30%;
    margin: auto;
}
.title-lr{
    float: left;
    width: 100%;
}
.title{
    float: left;
    color: #ffffff;
    font-weight: 500;
    margin-left: 30px;
}
.button{
    float: right;
}
.img{
    float: left;
    
    
}
.img-ul{
    width: 100%;
}
.img-ul li{
    float: left;
    width:186px;
    height:159px;
    list-style: none;
    margin-left: 30px;

}
.ul-img{
    float: left;
    width:205px;
    height:140px;
    border-radius: 3%;
    
}
.h4{
    font-weight: 400;
    color: #ffffff;
}
.h5{
    font-weight: 400;
    color: #8a8b8d;
}
.ul-p{
    color: #ffffff;
    float:right;
    margin-top: -25px;
    font-size: 14px;
    margin-right: -10px;
}
.content a:hover{
    color: #00cc4c;
    transition: 0.3s;
}
</style>